<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS_定位</title>
	<style>
		*{margin:0;padding:0;}

		.divcls{
			border:1px solid red;
			width: 200px;
			height: 200px;
		}
		.cls{
			background-color: lightcyan;
			width: 100px; height: 100px; 	margin:-100px 0 0 0 ;
		}
		#divcls3 .cls{margin:0px 0 0 0 ; }
		#div1{background-color: green; width:100px;height: 100px;
			margin:100px 0 0 50px ; z-index: -1;
		}
		#div2{background-color: red; width:100px;height: 100px; position: relative;
			margin:100px 0 0 50px ; 	z-index: -1;
		}

        #div3{background-color: red; width:100px;height: 100px; position: absolute;
			margin: 100px 0 0 50px ;
        }
        #div4{background-color: blue; width:100px;height: 100px; position: fixed;

        }
	</style>

</head>
<body>
	<h1>固定定位</h1>
	<div id="div4"></div>

	<h1>默认定位</h1>
	<div class="divcls">
		<div id="div1"></div>
		<div class="cls"></div>
	</div>

	<h1>相对定位</h1>
	<div class="divcls">
		<div id="div2"></div>
		<div class="cls"></div>
	</div>
	<h1>绝对定位</h1>
	<div class="divcls" id="divcls3">
		<div id="div3"></div>
		<div class="cls"></div>
	</div>




</body>
</html>